<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
  <div id ="app">
    <p>input 元素</p>
    <input v-model="message" placeholder="编辑我......">
    <p>表单消息是: {{message}}</p>
    <p></p>
    <textarea v-model="message2" placeholder="多行文本编辑"></textarea>
    <p>textarea 表单消息是：</p>
    <p style="white-space: pre;">{{message2}}</p>
    <textarea v-model="message2" placeholder="多行文本编辑">{{message2}}</textarea>
  </div>
</body>
<script>
  const app={
    data(){
      return{
        message :'',
        message2:'菜鸟教程\r\nhttps://www.renoob.com'
      }
    }
  }
  Vue.createApp(app).mount('#app')
</script>
</html>
